import React, {Component} from 'react'
import ArticleVM from 'cvm/article'
import { observer } from 'mobx-react/custom'
import Carousel from 'uxcore-carousel'
import './index.less'

const Swiper = observer(({ vm }) => {
  if (vm.swiperData.length === 0) {
    return <div />
  }
  return (
    <div className='img-swiper'>
      <Carousel className='demo-large-arrow' autoplay pauseOnHover largeArrowsAndDots arrows speed='800' autoplaySpeed='4000'>
        {vm.swiperData.map((item, index) => {
          return (
            <div onClick={() => vm.onClickItem(item)} key={index} className='banner-box'>
              <img src={item.ImageUrl} alt='' />
              <p>{item.Title}</p>
            </div>
          )
        })}
      </Carousel>
    </div>
  )
})

const List = observer(({ vm }) => {
  if (vm.listData.length === 0) {
    return <div />
  }
  return (
    <div className='essence-title'>
      {vm.listData.map((item, index) => {
        return (
          <div key={index} onClick={() => vm.handleListItem(item)} className='flex-wrap'>
            <div className='flex-2 left-box'>
              <p>{item.Title}</p>
              <p>{item.CreateTime}</p>
            </div>
            <div className='flex-1 right-box'>
              <img src={item.ImageUrlMin} alt='' />
            </div>
          </div>
        )
      })}
    </div>
  )
})

@observer
export default class Article extends Component {
  vm = new ArticleVM(this.props)
  constructor (props) {
    super(props)
    window.document.title = '农艺疏香'
  }
  render () {
    return (
      <div>
        <Swiper vm={this.vm} />
        <List vm={this.vm} />
      </div>
    )
  }
}
